<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码、条码、扫描、识别</title>
    <link rel="stylesheet" href="./css/base.css" />

    <script src="./js/jquery.min.js"></script>
    <script src="./js/DecoderWorker.js"></script>
    <script src="./js/exif.js"></script>
    <script src="./js/BarcodeReader.js"></script>
    <script src="./js/barcode.js"></script>
</head>

<body>
    <menu class="menu" id="menu">
        <nav class="active">二维码识别</nav>|
        <nav>条码识别</nav>
    </menu>
    <main class="main">
        <aside class="reader">
            <button class="sweep" onclick="sweep()">扫一扫</button>
            <div class="imgurl">
                <img id="imgurl" style="width: 300px;height:300px; display:none;" alt="当前识别的二维码" />
            </div>
            <textarea class="result" id="result" cols="32" rows="2" placeholder="二维码识别结果！"></textarea>
            <canvas class="canvas" id="canvassweep"></canvas>
        </aside>
        <aside class="create">
            <div id="camera">
                <button class="sweep" id="btn_snap" onclick="myfunction()">拍照</button>
                <button class="sweep" id="takeAgain" onclick="takeAgainClick()">切换摄像头</button>
                <div class="imgurl">
                </div>
                <textarea class="result" id="codeInfo" cols="32" rows="2" placeholder="条码识别结果！"></textarea>
                <video id="video" class="canvas" width="350" height="350" autoplay></video>
                <canvas class="canvas" id="canvas"></canvas>
                <div id="snapimage" class="snapimg"></div>
            </div>
        </aside>
    </main>

    <!-- 二维码识别 -->
    <script src="./js/jimp.js"></script>
    <script src="./js/jsqr.min.js"></script>
    <script src="./js/base.js"></script>
    <script>
        const result = document.querySelector('#result');
        const QrCode = new QrCodeRecognition({
            sweepId: '#canvassweep',
            uploadId: '#file',
            error: function (err) {
                // 识别错误反馈
                result.value = err;
            },
            seuccess: function (res) {
                // 识别成功反馈
                result.value = res.data;
            }
        });

        // 扫一扫
        function sweep() {
            result.value = '';
            QrCode.sweep();
        };
    </script>

    <!-- Demo页面交互 -->
    <script>
        const menu = [...document.querySelectorAll('nav')];
        const aside = [...document.querySelectorAll('aside')];
        menu.forEach((nav, n) => {
            nav.onclick = () => {
                aside.forEach((ele, a) => {
                    ele.style.display = 'none';
                    menu[a].classList.remove('active');
                });
                menu[n].classList.add('active');
                aside[n].style.display = 'block';
            }
        });
    </script>

    <!--条码扫码-->
    <script>
        barcode.init('canvas', 'video', 'codeInfo');
        //解码
        function myfunction() {
            barcode.mydecode('canvas');
        }
        //切换摄像头
        function takeAgainClick() {
            barcode.changeMode();
        }

        // var canvas = document.getElementById("canvas"),
        //     pzBtn = document.getElementById("btn_snap"),
        //     context = canvas.getContext("2d"),
        //     video = document.getElementById("video");

        // // // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
        // if (navigator.mediaDevices === undefined) {
        //     navigator.mediaDevices = {};
        // }

        // // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
        // // 使用getUserMedia，因为它会覆盖现有的属性。
        // // 这里，如果缺少getUserMedia属性，就添加它。
        // if (navigator.mediaDevices.getUserMedia === undefined) {
        //     navigator.mediaDevices.getUserMedia = function (constraints) {
        //         // 首先获取现存的getUserMedia(如果存在)
        //         var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        //         // 有些浏览器不支持，会返回错误信息
        //         // 保持接口一致
        //         if (!getUserMedia) {
        //             return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
        //         }
        //         //否则，使用Promise将调用包装到旧的navigator.getUserMedia
        //         return new Promise(function (resolve, reject) {
        //             getUserMedia.call(navigator, constraints, resolve, reject);
        //         });
        //     }
        // }
        // var constraints = {
        //     audio: false,
        //     video: {
        //         width: 720,
        //         height: 720
        //     }
        // }
        // navigator.mediaDevices.getUserMedia(constraints)
        //     .then(function (stream) {
        //         // var video = document.querySelector('video');
        //         // 旧的浏览器可能没有srcObject
        //         if ("srcObject" in video) {
        //             video.srcObject = stream;
        //         } else {
        //             //避免在新的浏览器中使用它，因为它正在被弃用。
        //             video.src = window.URL.createObjectURL(stream);
        //         }
        //         video.onloadedmetadata = function (e) {
        //             console.log(11111111111111111111)
        //             video.play();
        //         };
        //     })
        //     .catch(function (err) {
        //         console.log(err.name + ": " + err.message);
        //     });

        // function myfunction() {
        //     var date = new Date().getTime();
        //     // 点击，canvas画图
        //     context.drawImage(video, 0, 0, 300, 300);
        //     // 获取图片base64链接
        //     var image = canvas.toDataURL('image/png');
        //     // 定义一个img
        //     var img = new Image();
        //     //设置属性和src
        //     img.id = "imgBox";
        //     img.src = image;
        //     img.style = "display:none"
        //     //将图片添加到页面中
        //     var div= document.getElementById('snapimage');
        //     div.appendChild(img);
        //     //解析条码
        //     BarcodeReader.DecodeImage(img);
        //     // base64转文件
        //     function dataURLtoFile(dataurl, filename) {
        //         var arr = dataurl.split(','),
        //             mime = arr[0].match(/:(.*?);/)[1],
        //             bstr = atob(arr[1]),
        //             n = bstr.length,
        //             u8arr = new Uint8Array(n);
        //         while (n--) {
        //             u8arr[n] = bstr.charCodeAt(n);
        //         }
        //         return new File([u8arr], filename, {
        //             type: mime
        //         });
        //     }
        //     console.log(date);
        //     console.log(dataURLtoFile(image, date + '.png'));
        // };


        // //访问用户媒体设备的兼容方法
        // function getUserMedia(constraints, success, error) {
        //     console.log('constraints',constraints)
        // console.log('success',success)
        // console.log('error',error)
        //     if (navigator.mediaDevices.getUserMedia) {
        //         //最新的标准API
        //         navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        //     } else if (navigator.webkitGetUserMedia) {
        //         //webkit核心浏览器
        //         navigator.webkitGetUserMedia(constraints, success, error)
        //     } else if (navigator.mozGetUserMedia) {
        //         //firfox浏览器
        //         navigator.mozGetUserMedia(constraints, success, error);
        //     } else if (navigator.getUserMedia) {
        //         //旧版API
        //         navigator.getUserMedia(constraints, success, error);
        //     }
        // }
       
        // var mediaStreamTrack;
        // //默认后置摄像头
        // var mode = 'environment';

        // function success(stream) {
        //     //兼容webkit核心浏览器
        //     let CompatibleURL = window.URL || window.webkitURL;
        //     //将视频流设置为video元素的源
        //     mediaStreamTrack = stream.getTracks()[0];
            
        //     console.log('mediaStreamTrack',mediaStreamTrack)
        //     video.srcObject = stream;
        //     video.play();
        //     console.log('video',video)
        // }

        // function error(error) {
        //     alert('访问用户媒体设备失败,请尝试更换浏览器')
        // }

        // //请求切换前后置摄像头
        // function takeAgainClick() {
        //     changeMode();
        // };

        // // 切换摄像头
        // function changeMode() {
        //     mode = mode === 'user' ? 'environment' : 'user';
        //     mediaStreamTrack.stop();
        //     takePhoto();
        // }
        // //请求摄像头
        // function takePhoto() {
        //     if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia ||
        //         navigator.mozGetUserMedia) {
        //         //调用用户媒体设备, 访问摄像头
        //         getUserMedia({
        //             video: {
        //                 width: 720,
        //                 height: 720,
        //                 facingMode: mode //设置使用后置摄像头，user为前置摄像头
        //             }
        //         }, success, error);
        //         $("#showImg").hide(); //隐藏拍照结果显示框
        //         $("#video").show(); //开启拍照框
        //     } else {
        //         alert('不支持访问用户媒体');
        //     }
        // }

        // //直接调用方法，实现页面加载完就自动打开摄像头
        // takePhoto();
        // BarcodeReader.Init();
        // BarcodeReader.SetImageCallback(function (result) {
           
        //     if (!result.length) {
        //         $("#codeInfo").text('条形码读取失败');
        //         return
        //     }
        //     var barcode = result[0];
        //     if (barcode.Value) {
        //         $("#codeInfo").text('条形码信息是：' + barcode.Value);
        //     }
        //     console.log("1.===" + barcode.Value);
        // });
    </script>
</body>

</html>